<template>
  <div class="detail">
    <div class="header">
      <div class="head">
        <router-link
          :to="{ path: '/jiudian', query: { id: id } }"
          class="lianjie"
          >返回</router-link
        >
        <h3>酒店详情</h3>
      </div>
      <ul class="title">
        <li>
          <a href="#gonglue" :class="{ borderB: border1 }" @click="borderA"
            >攻略</a
          >
        </li>
        <li>
          <a href="#liangdian" :class="{ borderB: border2 }" @click="borderB"
            >酒店亮点</a
          >
        </li>
        <li>
          <a href="#fuwu" :class="{ borderB: border3 }" @click="borderC"
            >设施服务</a
          >
        </li>
      </ul>
    </div>
    <div class="footer">
      <ul>
        <li>每晚</li>
        <li>
          <span>￥</span><span>{{ data.money }}</span> 起
        </li>
      </ul>
      <button @click="jiesuan">去结算</button>
    </div>
    <div class="detail-title" id="gonglue">
      <h3>{{ data.title }}</h3>
      <span> 豪华酒店 </span>
    </div>
    <div class="time">
      <ul v-for="(val, index) of detail_time" :key="index">
        <li>{{ val.shijian }}</li>
        <li>{{ val.time }}</li>
      </ul>
    </div>
    <div class="text">
      <p>你不知道的事:</p>
      <p>
        {{ data.title }}位于北京中央商务区（CBD），毗连国贸商城。
        饭店共有五百余间客房、套房和六十余间现代而舒适的中国大饭店公馆，其中重装升级后的豪华阁客房及套房于2019年1月全新亮相。
        饭店共有阿丽雅餐厅及酒吧、夏宫中餐厅、咖啡苑自助餐厅、大堂酒廊和美食店等五间餐厅和酒廊。
        此外，饭店健身俱乐部设有室内温水游泳池，壁球场和室内网球场，并配有攀岩机和离心训练机等专业健身设施。
        同时，饭店也是客人举办盛大社交和商务活动的上佳之选。特设婚礼专员，为客人提供一站式婚宴、庆典等服务。
      </p>
    </div>
    <div class="liangdian" id="liangdian">
      <h3>酒店亮点</h3>
      <div>
        <img
          src="https://b1-q.mafengwo.net/s12/M00/C3/AE/wKgED1uN_DGAGqTCAAGRyN5Zjo425.jpeg"
          width="100%"
          height="90px"
          style="border-radius: 5px"
        />
        <div>
          <p>马蜂窝酒店榜单</p>
          <h3>带娃精选</h3>
        </div>
      </div>
    </div>
    <div class="fuwu" id="fuwu">
      <h3>设施服务</h3>
      <ul>
        <li v-for="(val, index) of detail_fuwu" :key="index">{{ val }}</li>
      </ul>
    </div>
    <div class="zhiFu" v-if="zhiFu">
      <div>
        <span class="onoff" @click="guanBi">×</span>
        <h1>本单共支付{{ data.money }}元</h1>
        <div>
          <h3>请选择支付方式:</h3>
          <img src="https://static.easyicon.net/preview/122/1226452.gif" alt />
          <img src="https://static.easyicon.net/preview/122/1226612.gif" alt />
        </div>
        <div>
          <h3>
            <button class="button" @click="zhifuChengGong">立即支付</button>
          </h3>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {},
      id: "",
      border1: false,
      border2: false,
      border3: false,
      detail_time: [
        { shijian: "入住", time: "14:00 - 00:00" },
        { shijian: "离店", time: "12:00之前" },
        { shijian: "开业", time: "1900年" },
        { shijian: "翻新", time: "2018年" },
        { shijian: "规模", time: "584间" },
      ],
      detail_fuwu: [
        "24小时前台服务",
        "快速入住服务",
        "行李存放服务",
        "接机服务",
        "行政楼层",
        "商务中心",
        "会议设施",
        "中餐厅",
      ],
      zhiFu: false,
    };
  },
  methods: {
    borderA() {
      this.border1 = true;
      this.border2 = false;
      this.border3 = false;
    },
    borderB() {
      this.border1 = false;
      this.border2 = true;
      this.border3 = false;
    },
    borderC() {
      this.border1 = false;
      this.border2 = false;
      this.border3 = true;
    },
    jiesuan() {
      this.zhiFu = true;
    },
    guanBi() {
      this.zhiFu = false;
    },
    zhifuChengGong() {
      this.$messagebox("支付成功！感谢您的信任与支持！~~~");
      this.zhiFu = false;
      this.$router.push("/");
    },
  },
  mounted() {
    console.log(this.$route.query);
    this.id = this.$route.query.id;
    let index = this.$route.query.index;
    this.$axios.get("/hotel?id=" + this.id).then((res) => {
      this.data = res.data.result[index];
      console.log(this.data);
    });
  },
};
</script>
<style scoped>
.header {
  position: fixed;
  background-color: snow;
  margin-bottom: 10px;
  width: 100%;
  top: 0;
}
.footer {
  position: fixed;
  bottom: 0;
  background-color: snow;
  width: 95%;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.footer li {
  font-size: 12px;
}
.footer li span {
  color: red;
}
.footer li span:nth-child(2) {
  font-size: 16px;
  font-weight: bold;
}
.footer button {
  padding: 5px 15px;
  border: 0;
  background-color: sandybrown;
  border-radius: 5px;
  color: cornflowerblue;
}
.detail {
  margin: 0 10px;
}
.head {
  padding: 10px 5px;
  display: flex;
  position: relative;
}
.head .lianjie {
  position: absolute;
  top: 15px;
  left: 10px;
}
.head h3 {
  margin: 0 auto;
  font-weight: bold;
  font-size: 20px;
}
.title {
  display: flex;
  justify-content: space-around;
  margin: 0 30px;
  padding: 0;
}
.title li,
.title a {
  padding-bottom: 10px;
}
.detail-title {
  width: 100%;
  background-color: #80766e;
  height: 70px;
  border-radius: 5px;
  display: flex;
  line-height: 70px;
  font-size: 15px;
  color: #eef7f2;
  margin-top: 80px;
}
.detail-title h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 10px;
}
.time {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
}
.time > ul {
  width: 50%;
  margin: 10px 0;
}
.time > ul > li:nth-child(2) {
  font-size: 16px;
  font-weight: bold;
}
.text {
  background-color: #f7de98;
  border-radius: 5px;
}
.text p {
  margin: 10px;
  padding: 10px;
}
.liangdian {
  border-top: 4px solid #f7de98;
  border-bottom: 4px solid #f7de98;
}
.liangdian > h3 {
  padding: 15px 0;
  font-weight: bold;
}
.liangdian > div {
  padding-bottom: 15px;
  position: relative;
  color: aqua;
}
.liangdian > div p,
.liangdian > div h3 {
  position: absolute;
  left: 20px;
}
.liangdian > div p {
  top: 15px;
}
.liangdian > div h3 {
  top: 40px;
  font-weight: bold;
}
.fuwu {
  height: 200px;
}
.fuwu h3 {
  font-weight: bold;
  margin: 15px 0;
}
.fuwu ul {
  display: flex;
  flex-wrap: wrap;
}
.fuwu ul > li {
  width: 20%;
  margin: 5px 8px;
  border: 1px solid slategray;
  background-color: #f7f4ed;
  padding: 5px 3px;
  font-size: 12px;
  text-align: center;
}
.borderB {
  border-bottom: 1px solid red;
}
/* 支付样式 */
.zhiFu {
  width: 94%;
  height: 200px;
  border-radius: 8px;
  position: fixed;
  top: 30%;
  left: 3%;
  text-align: center;
  background-color: skyblue;
}
.zhiFu h1 {
  margin-top: 20px;
}
.zhiFu img {
  width: 30px;
  margin: 10px;
}
.button {
  padding: 10px 15px;
  border: 0;
  background-color: sandybrown;
  border-radius: 5px;
}
.zhiFu > div:first-child {
  position: relative;
}
</style>
